<template>
  <div class="app-container">
    <el-row>
      <el-col>
        <el-button type="primary" @click="dialogFormVisible = true">新增</el-button>
      </el-col>
    </el-row>

    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="roleName" label="角色名称" align="center"> </el-table-column>
      <el-table-column prop="roleKey" label="角色标识" align="center"> </el-table-column>
      <el-table-column prop="menuCheckStrictly" label="菜单树选择项是否关联显示" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.menuCheckStrictly ? 'success' : 'danger'"
            disable-transitions>{{ scope.row.menuCheckStrictly ? '是' : '否' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="deptCheckStrictly" label="部门树选择项是否关联显示" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status === '0' ? 'success' : 'danger'" disable-transitions>{{ scope.row.status === '0' ?
            '是' : '否' }}</el-tag>
        </template>

      </el-table-column>
      <el-table-column prop="status" label="角色状态" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status === '0' ? 'success' : 'danger'" disable-transitions>{{ scope.row.status === '0' ?
            '正常' : '禁用' }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column prop="createTime" label="创建时间" align="center"> </el-table-column>
      <el-table-column fixed="right" label="操作" width="200" align="center">
        <template slot-scope="scope">
          <el-button type="text" size="small">编辑</el-button>
          <el-button @click="delRole(scope.row)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-row>
      <Pagination :pageNum="gather.current" :total="gather.total" :pageSize="gather.size" @sizeChange="sizeChange"
        @currentChange="currentChange"></Pagination>
    </el-row>
    <el-dialog title="添加角色" :visible.sync="dialogFormVisible" @close="handleClose">
      <el-form :model="roleForm" :rules="rules" ref="roleForm">
        <el-form-item label="角色名" :label-width="formLabelWidth" prop="roleName">
          <el-input v-model="roleForm.roleName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="角色标识" :label-width="formLabelWidth" prop="roleKey">
          <el-input v-model="roleForm.roleKey" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="数据范围" :label-width="formLabelWidth" prop="dataScope">
          <el-radio v-model="roleForm.dataScope" label="1">所有数据权限</el-radio>
          <el-radio v-model="roleForm.dataScope" label="3">本部门数据权限</el-radio>
          <el-radio v-model="roleForm.dataScope" label="4">本部门及以下数据权限</el-radio>
          <el-radio v-model="roleForm.dataScope" label="5">仅本人数据权限</el-radio>
        </el-form-item>
        <el-form-item label="菜单树选择项是否关联显示" :label-width="formLabelWidth" prop="menuCheckStrictly">
          <el-radio v-model="roleForm.menuCheckStrictly" label="0">父子不互相关联显示</el-radio>
          <el-radio v-model="roleForm.menuCheckStrictly" label="1">父子互相关联显示</el-radio>
        </el-form-item>
        <el-form-item label="部门树选择项是否关联显示" :label-width="formLabelWidth" prop="deptCheckStrictly">
          <el-radio v-model="roleForm.deptCheckStrictly" label="0">父子不互相关联显示</el-radio>
          <el-radio v-model="roleForm.deptCheckStrictly" label="1">父子互相关联显示</el-radio>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="submitFrom()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import Pagination from '../../../components/Pagination/pagination.vue'
import { roleList,saveRole } from '@/api/sys/role.js'
export default {
  components: { Pagination },
  name: "Depart",
  data() {
    return {
      tableData: [],
      dialogFormVisible: false,
      roleForm: {
        roleName: "",
        menuCheckStrictly: 0,
        deptCheckStrictly: 0,
        dataScope:'1'
      },
      formLabelWidth: "120px",
      gather: {
        current: 1,//默认第一页
        size: 10,//一页展示10条
        total: 0,
      },
      rules: {
        roleName: [
          { required: true, message: '请输入角色名', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        roleKey: [
          { required: true, message: '请输入权限标识', trigger: 'change' }
        ],
      }
    };
  },
  watch: {},
  mounted() {
  },
  created() {
    this.queryAll();
  },
  methods: {
    // 点击页码及上一页下一页按钮操作
    currentChange(val) {
      this.gather.current = val;
      this.queryAll(); //调用接口方法
    },
    //每页展示几条按钮操作
    sizeChange(val) {
      this.gather.size = val;
      this.queryAll(); //调用接口方法
    },
    queryAll() {
      roleList({
        current: this.gather.current,
        size: this.gather.size
      }).then(res => {
        console.log(res)
        if (res.code === 200) {
          this.tableData = res.data.records;
        }

      });
    },
    //新增角色
    submitFrom() {
      saveRole(JSON.stringify(this.roleForm)).then(res=>{
        if (res.code == 200) {
          this.handleClose();
          this.queryAll();
        }
      })
    },
    //删除角色
    delRole(row) {
      let params = {
        id: row.id,
      };
      this.$http({
        url: "/sysRole/delRole",
        data: JSON.stringify(params),
        method: "post",
        headers: {
          "Content-Type": "application/json;charset=UTF-8",
        },
      }).then((res) => {
        console.log(res);
        if (res.data.code == 200) {
          //刷新列表
          this.queryAll();
          this.$message('删除成功！');

        }
      });
    },
    //关闭弹窗
    handleClose() {
      this.dialogFormVisible = false;
      //清空表单
      this.clearForm();
    },

    clearForm() {
      this.roleForm.roleName = "";
    },
  },
};
</script>
    
<style>
.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>